import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";
import {
Phone,
CalendarDays,
Target,
BarChart3,
CheckCircle2,
ArrowRight,
Menu,
X,
MessageSquare,
Clock,
Sparkles,
Star,
Quote,
Play,
Pause,
AudioLines
} from "lucide-react";
import { useState, useEffect, useRef } from "react";
import { useToast } from "@/hooks/use-toast";
import { Link } from "react-router-dom";
const AnimatedStat = ({ end, label, suffix = "", prefix = "", duration = 2000 }: { end: number, label: string, suffix?: string, prefix?: string, duration?: number }) => {
const [count, setCount] = useState(0);
const [isVisible, setIsVisible] = useState(false);
const ref = useRef(null);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) setIsVisible(true);
},
{ threshold: 0.1 }
);
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, []);
useEffect(() => {
if (!isVisible) return;
let start = 0;
const increment = end / (duration / 16);
const timer = setInterval(() => {
start += increment;
if (start >= end) {
setCount(end);
clearInterval(timer);
} else {
setCount(Math.floor(start));
}
}, 16);
return () => clearInterval(timer);
}, [end, isVisible, duration]);
return (
);
};
const FadeIn = ({ children, delay = 0, className = "" }: { children: React.ReactNode, delay?: number, className?: string }) => {
const [isVisible, setIsVisible] = useState(false);
const ref = useRef(null);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.disconnect();
}
},
{ threshold: 0.1 }
);
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, []);
return (
(null);
const { toast } = useToast();
const estimatedROI = Math.round(missedCalls[0] * averageTicket[0] * 0.3);
const callsToBreakEven = Math.max(1, Math.ceil(297 / (averageTicket[0] || 1)));
const serenityGained = Math.min(100, Math.round((stressfulCalls[0] * 1.5 + hoursLost[0] * 3)));
useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 20);
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
const scrollTo = (id: string) => {
setIsMobileMenuOpen(false);
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
};
const handleFormSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
const formData = new FormData(e.currentTarget);
const name = formData.get("name") as string;
const email = formData.get("email") as string;
const phone = formData.get("phone") as string;
const trackingPayload = {
type: "external_form_submission",
timestamp: Date.now(),
formId: "Demande de Contact",
formData: {
first_name: name,
email: email,
phone: phone,
"contact.formule": selectedPlan,
},
formLabels: {
first_name: "Nom complet",
email: "Email",
phone: "Téléphone",
"contact.formule": "Formule sélectionnée",
},
url: window.location.href,
title: document.title,
path: window.location.pathname,
userAgent: navigator.userAgent,
trackingId: "tk_168f4ac82f05412e93375bc94cf882f4",
locationId: "SwIR8fqonZcNbIwmQzbA",
sessionId: crypto.randomUUID(),
properties: {
deviceType: /Mobile|Android|iPhone/i.test(navigator.userAgent)
? "mobile"
: "desktop",
},
};
fetch("https://backend.leadconnectorhq.com/external-tracking/events", {
method: "POST",
headers: {
"Content-Type": "application/json",
version: "2021-07-28",
},
body: JSON.stringify(trackingPayload),
}).catch(() => {});
setTimeout(() => {
setIsSubmitting(false);
setIsModalOpen(false);
toast({
title: "Demande envoyée !",
description: "Nous vous recontacterons très rapidement.",
});
}, 800);
};
return (
{prefix}{count}{suffix}
{label}
{children}
);
};
export default function Index() {
const [isScrolled, setIsScrolled] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedPlan, setSelectedPlan] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const [missedCalls, setMissedCalls] = useState([30]);
const [averageTicket, setAverageTicket] = useState([80]);
const [stressfulCalls, setStressfulCalls] = useState([15]);
const [hoursLost, setHoursLost] = useState([5]);
const [playingAudio, setPlayingAudio] = useState
{/* Navigation */}
{/* Desktop Nav */}
{/* Mobile Menu Toggle */}
{/* Mobile Nav */}
{isMobileMenuOpen && (
{/* Hero Section (Dark) */}
{/* Decorative elements */}
✨ L'IA au service de votre entreprise
{/* Logos Marquee */}
{/* Stats Section */}
{/* Agents Section (Dark) */}
🤖 Votre Équipe IA
{/* Services Section (Light) */}
Nos Services
{/* Audio Demos */}
🎙️ Démos Vocales
{/* Testimonials */}
Avis Clients
{/* Well-being Calculator Section (Light) */}
{/* FAQ Section */}
FAQ
{[
{ q: "Comment se passe l'intégration avec mon agenda ?", a: "Votre agent se connecte directement à votre agenda existant (Google Calendar, Calendly, etc.) via API. Il connaît vos disponibilités en temps réel et réserve directement les créneaux." },
{ q: "Est-ce que la voix fait robotique ?", a: "Pas du tout ! Nous utilisons les dernières technologies d'IA vocale. Les voix sont extrêmement naturelles, avec des intonations humaines, des respirations et une capacité à gérer les interruptions." },
{ q: "Que se passe-t-il si l'agent ne connaît pas la réponse ?", a: "Si une question est hors de sa base de connaissances, l'agent est programmé pour prendre les coordonnées de l'appelant et vous envoyer un message détaillé pour que vous puissiez le rappeler." },
{ q: "Y a-t-il un engagement de durée ?", a: "Non, nos offres sont sans engagement. Vous pouvez annuler ou modifier votre abonnement à tout moment d'un simple email." },
{ q: "Combien de temps faut-il pour mettre en place mon agent ?", a: "L'installation complète prend généralement entre 48h et 72h, le temps de configurer sa base de connaissances, de l'entraîner sur votre métier et de connecter vos outils." }
].map((faq, i) => (
{faq.q}
{faq.a}
))}
{/* CTA / Contact Section (Dark) */}
{/* Footer */}
{/* Contact Modal */}
);
}
{/* Desktop Nav */}
{/* Mobile Menu Toggle */}
Cas d'usage
Comment ça marche
Tarifs
)}
Libérez-vous du téléphone et retrouvez votre sérénité
Les appels incessants, les questions répétitives et le stress vous épuisent ? Notre assistant IA prend le relais 24h/24, avec le sourire et une patience infinie.
{/* Main Image Container */}
{/* Floating Dashboard Element */}
Agent IA Actif
En direct
+33 6 12 34 56 78
Rendez-vous pris
À l'instant
01 23 45 67 89
Urgence qualifiée
Il y a 5 min
Disponibilité
24h/24 - 7j/7
Ils nous font confiance
{[...Array(2)].map((_, i) => (
))}
L'ATELIER
Studio 54
Cabinet Martin
GARAGE DUPONT
TechSolutions
Immobilier & Co
BEAUTYLINE
Rencontrez votre assistant
Choisissez la voix qui correspond à votre entreprise. Ils travaillent 24h/24, sans stress et sans pause café ☕
{/* Julia Card */}
{/* Léo Card */}
Voix Féminine
Julia
Chaleureuse, patiente et rassurante. Parfaite pour les salons, cabinets médicaux ou services clients.
Voix Masculine
Léo
Dynamique, professionnel et confiant. Idéal pour les artisans, agences immobilières ou B2B.
Ce qu'ils gèrent à votre place :
{[
{ icon: Phone, text: "Réponse immédiate 24/7" },
{ icon: MessageSquare, text: "Filtre les appels indésirables" },
{ icon: Target, text: "Gère les clients impatients" },
{ icon: CalendarDays, text: "Prend et modifie vos rendez-vous" },
].map((feature, i) => (
Ce que votre Secrétaire IA fait pour vous
L'agent gère vos appels pendant que vous vous concentrez sur votre métier
{[
{ icon: Phone, title: "Décroche vos appels", desc: "L'agent répond 24h/24, qualifie les demandes et ne laisse passer aucun client.", color: "text-blue-600", bg: "bg-blue-100" },
{ icon: CalendarDays, title: "Gère votre agenda", desc: "Il planifie les RDV, envoie les confirmations et relance les no-shows.", color: "text-fuchsia-600", bg: "bg-fuchsia-100" },
{ icon: Sparkles, title: "Transferts intelligents", desc: "Il transfère l'appel à la bonne personne de votre équipe si nécessaire.", color: "text-amber-500", bg: "bg-amber-100" },
{ icon: BarChart3, title: "Rapports détaillés", desc: "Votre agent vous envoie des résumés par email ou SMS après chaque appel.", color: "text-indigo-600", bg: "bg-indigo-100" }
].map((service, i) => (
))}
{service.title}
{service.desc}
Écoutez nos agents en action
Des conversations fluides, naturelles et 100% professionnelles.
{[
{
id: 1,
title: "Prise de rendez-vous",
role: "Salon de Beauté",
clientAvatar: "https://vibe.filesafe.space/1778443050576792056/assets/7f768904-d177-4bb0-b895-95ba2f6c18e4.jpg",
duration: "0:45",
transcript: [
{ speaker: "Agent IA", text: "Bonjour, vous êtes bien au Salon d'Élégance. Je suis votre assistante virtuelle. Comment puis-je vous aider ?" },
{ speaker: "Client", text: "Bonjour, je voudrais prendre rendez-vous pour une coupe femme ce jeudi." },
{ speaker: "Agent IA", text: "Très bien. J'ai une disponibilité à 14h ou à 16h30 ce jeudi. Que préférez-vous ?" }
]
},
{
id: 2,
title: "Qualification d'urgence",
role: "Artisan Plombier",
clientAvatar: "https://vibe.filesafe.space/1778443050576792056/assets/c51383d9-2d3e-4226-981a-32fc26d34330.jpg",
duration: "1:12",
transcript: [
{ speaker: "Agent IA", text: "Plomberie Express, bonjour. Je suis votre assistant virtuel. Quelle est votre urgence ?" },
{ speaker: "Client", text: "J'ai une fuite d'eau importante dans ma salle de bain !" },
{ speaker: "Agent IA", text: "Je comprends. Coupez l'arrivée d'eau si possible. Un technicien peut être chez vous dans 30 minutes. Pouvez-vous me confirmer votre adresse ?" }
]
}
].map((demo) => (
{/* Player UI */}
{demo.title}
{demo.role}
{demo.transcript.map((line, idx) => {
const isJulia = line.speaker === 'Agent IA';
return (
);
})}
{line.speaker}
{line.text}
Ils ont adopté l'Agent IA
{[
{ name: "Marc D.", role: "Artisan Plombier", avatar: "https://vibe.filesafe.space/1778443050576792056/assets/c51383d9-2d3e-4226-981a-32fc26d34330.jpg", text: "Je perdais au moins 3 appels par jour quand j'étais en intervention. Depuis que mon Agent IA gère, mon agenda est plein et je ne suis plus stressé." },
{ name: "Sophie L.", role: "Gérante de Salon de Beauté", avatar: "https://vibe.filesafe.space/1778443050576792056/assets/7f768904-d177-4bb0-b895-95ba2f6c18e4.jpg", text: "Mes clientes adorent la fluidité. L'IA prend les rendez-vous directement et ça me libère un temps fou pour m'occuper d'elles." },
{ name: "Thomas R.", role: "Cabinet d'Avocats", avatar: "https://vibe.filesafe.space/1778443050576792056/assets/b962ef42-995d-4b0b-a67e-235726b0e108.jpg", text: "Un accueil téléphonique irréprochable. L'image de notre cabinet est préservée et les demandes sont parfaitement qualifiées." }
].map((testimonial, i) => (
))}
{[...Array(5)].map((_, i) =>
"{testimonial.text}"
{testimonial.name}
{testimonial.role}
{/* Well-being Calculator */}
🧘♀️ Calculateur de Sérénité
Mesurez votre gain de bien-être
Le téléphone qui sonne en permanence est une source de stress majeure. Découvrez l'impact d'un assistant qui filtre et gère tout pour vous.
{stressfulCalls[0]}
{hoursLost[0]} h
Bénéfice Mensuel Estimé
{stressfulCalls[0] * 4}
Appels filtrés
{hoursLost[0] * 4}h
Temps libre gagné
✓ Fini les interruptions en plein travail
✓ Plus besoin de gérer les clients impatients
✓ Vous rentrez chez vous plus tôt, l'esprit léger
Questions Fréquentes
Prêt à bosser pour vous ?
Votre Agent IA peut commencer dès demain · Essai 7 jours · Sans engagement